<template>
  <!-- 大盒子 -->
  <div class="MedicenCata">
    <!--  描述  -->
    <div class="header">
      <div class="header-icon">
        <i class="el-icon-byj"
           style="border-radius: 50%;font-size: 20px;padding: 6px;margin-left: 8px;background-color: #409EFF;color: #fff;"></i>
        <span style="font-size: 12px;font-weight:400;margin-left: 12px;">往来单位</span>
        <div class="feetbtn">
          <el-button v-for="(v,i) in feetBtn" :key="i" :type="v.type" :loading="loading" :icon="v.icon" size="small"
                     plain @click="feetHandClick(v)">{{ v.label }}
          </el-button>
        </div>
      </div>
    </div>
    <!-- 主体内容 -->
    <div class="main">
      <!-- right -->
      <div class="main-right" ref="mainRight">
        <!-- tit -->
        <div class="main-icon">
          <div class="main-icon-a">
            <i :class="iconComes"
               style="border-radius: 50%;font-size: 20px;padding: 6px;margin-left: 8px;;background-color: #5a5a5a;color: #fff;"></i>
            <span style="font-size: 12px;font-weight:bold;margin-left: 12px;color: #606266;">{{ CatalogueName }}</span>
          </div>
          <!-- btn1 -->
          <div class="main-icon-b">
            <span style="font-size: 12px;color: #606266;font-weight: bold;">状态：</span>
            <el-dropdown @command="handleCommand"  trigger="click">
              <span class="el-dropdown-link">{{ DropDownedName }}<i class="el-icon-down"></i></span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="a">可用</el-dropdown-item>
                <el-dropdown-item command="b">禁用</el-dropdown-item>
                <el-dropdown-item command="c" divided>全部</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <!-- btn2 -->
          <!--          <div class="main-icon-c">
                      <div style="display: inline-block; margin-left: 10px;">
                        <span style="font-size: 12px; color: #606266; font-weight: bold; display: inline-block; min-width: 60px; line-height: 28px;">挂号类型:</span>
                        <el-select
                            v-model="regState"
                            placeholder=""
                            clearable
                            size="mini"
                            @change="handleGetRegList"
                            class="custom-select"
                            style="width:150px">
                          <el-option
                              v-for="item in regOptions"
                              :key="item.id"
                              :label="item.label"
                              :value="item.id">
                          </el-option>
                        </el-select>
                      </div>
                    </div>-->

          <div class="main-icon-c">
            <span
                style="font-size: 12px;color: #606266;font-weight: bold;display: inline-block;width: 68px;">关键字:</span>
            <el-input size="mini" placeholder="合约单位名称" v-model="searchValue"></el-input>
          </div>
          <!-- btn3 -->
          <div class="main-icon-c">
            <el-button v-for="(v,i) in headerBtn" :key="i" :type="v.type" :loading="loading" :icon="v.icon" size="mini"
                       v-if="!v.auth || permissionsArr.includes(v.auth)"
                       :style="v.style" @click="handClick(i)">{{ v.title }}
            </el-button>
          </div>
        </div>
        <!-- table -->
        <div class="table">
          <el-table :data="tableData" border  @row-dblclick="handleDbShowData" style="width: 100%">
            <el-table-column v-for="(col, inx) in tableRows" :key="inx" :type="col.type" :prop="col.prop"
                             :label="col.name" :render-header="labelHead"
                             :min-width="getColumnWidth(col.label,col.prop,tableData)" header-align="center">

              <template #default="{ row }">
                {{ safeGetMappedValue(col, row) }}
              </template>
            </el-table-column>
            <!-- fixed -->
            <el-table-column fixed="left" label="行号" type="index"></el-table-column>
            <el-table-column fixed="right" label="操作" width="148" v-if="permissionsArr.includes('system:costnametable:edit')">
              <template slot-scope="scope">
                <div class="editbox" style="text-align: center;">
                  <el-button type="primary" @click="handleClickEdit(scope.row)" size="mini">编辑</el-button>
                  <el-button :type="scope.row.state === 1 ? 'danger' : 'success' " @click="handleStartOrDisabled(scope.row)" size="mini">{{ scope.row.state === 1 ? '禁用' : '启用' }}</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <el-dialog :title="addUnitForm.id  == null ?'新增合约单位':'修改合约单位'" :before-close="handleCancelContract"
                   :visible.sync="addUnitModalVisible" class="addUnitDialog" width="50%" :close-on-click-modal="false">
          <div class="aform">
            <!-- 表单 -->
            <el-form :model="addUnitForm" label-width="90px" size="mini" :rules="addUnitRules" ref="addUnitRef">
              <el-row :gutter="20">
                <el-col :span="v.spanRows" type="flex" v-for="(v,i) in addUnitType" :key="i"
                        :style="{ marginLeft: v.modelValue === 'uscc' ? '18px' : '0' }">
                  <!-- input -->
                  <el-form-item v-if="v.type === 'input'" :required="['code', 'name'].includes(v.modelValue)" :prop="v.modelValue"
                                :label="v.label" :style="v.modelValue === 'uscc' ? 'white-space: nowrap' : ''">
                    <el-input :suffix-icon='v.prefix' v-model="$data.addUnitForm[v.modelValue]"
                              @input="handleNameChangeCode(v,i)"
                              :style="{ marginLeft: v.modelValue === 'uscc' ? '30px' : '0' }" >

                    </el-input>
                  </el-form-item>
                  <!-- select -->
                  <el-form-item v-if="v.type === 'select'" :label="v.label" :prop="v.modelValue">
                    <el-select v-model="$data.addUnitForm[v.modelValue]" filterable
                               :disabled="v.modelValue === 'untAtte'">
                      <el-option v-for="item in $data[v.op]" :key="item.id" :label="item.label" :value="item.id">
                        <span style="float: center; color: #8492a6; font-size: 12px">{{ item.label }}</span></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- 新增的按钮区域 - 并排显示（添加在前，取消在后） -->
              <el-form-item style="margin-top: 20px; text-align: right" >
                <el-button type="primary" size="mini" @click="handleAddContractUnit">
                  {{ addUnitForm.id == null ? '新增' : '修改' }}
                </el-button>
                <el-button size="mini" @click="handleCancelContract" style="margin-left: 10px">取消</el-button>
              </el-form-item>
            </el-form>
          </div>

        </el-dialog>

        <el-dialog title="查看往来单位信息"  :visible.sync="showModalVisible" class="addUnitDialog" width="50%" :close-on-click-modal="false">
          <div class="aform">
            <!-- 表单 -->
            <el-form :model="showForm" label-width="90px" size="mini" disabled="disabled">
              <el-row :gutter="20">
                <el-col :span="v.spanRows" type="flex" v-for="(v,i) in addUnitType" :key="i"
                        :style="{ marginLeft: v.modelValue === 'uscc' ? '18px' : '0' }">
                  <!-- input -->
                  <el-form-item v-if="v.type === 'input'" :required="['code', 'name'].includes(v.modelValue)"
                                :label="v.label" :style="v.modelValue === 'uscc' ? 'white-space: nowrap' : ''">
                    <el-input :suffix-icon='v.prefix' v-model="$data.showForm[v.modelValue]"
                              @input="handleNameChangeCode(v,i)"
                              :disabled="v.modelValue === 'code' && showForm.id != null"
                              :style="{ marginLeft: v.modelValue === 'uscc' ? '30px' : '0' }">

                    </el-input>
                  </el-form-item>
                  <!-- select -->
                  <el-form-item v-if="v.type === 'select'" :label="v.label">
                    <el-select v-model="$data.showForm[v.modelValue]" filterable
                               :disabled="v.modelValue === 'untAtte'">
                      <el-option v-for="item in $data[v.op]" :key="item.id" :label="item.label" :value="item.id">
                        <span style="float: center; color: #8492a6; font-size: 12px">{{ item.label }}</span></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- 新增的按钮区域 - 并排显示（添加在前，取消在后） -->
              <el-form-item style="margin-top: 20px; text-align: right">
                <el-button size="mini" @click="showModalVisible = false" style="margin-left: 10px" :disabled="false">取消</el-button>
              </el-form-item>
            </el-form>
          </div>

        </el-dialog>
      </div>
    </div>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[8, 16, 24]"
        :page-size="pageSize"
        :total="totalSize"
        layout="total, sizes, prev, pager, next, jumper"
        background
    >
    </el-pagination>
  </div>
</template>

<script>
import {getContractDeptList} from "@/api/contractDept/contractDept";
import {costnametablePage} from "@/api/Outpatient/chargingPrice";
import AddType from "@/views/reservation/reservationAddType";
import {pinyin} from "pinyin-pro";
import {addContractUnit, editContractUnit} from "@/api/reservation/reservation";

export default {
  inject: ['reload'], // 无痕刷新
  components: {},
  data() {
    return {
      // 树菜单Props
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // str
      windowWidth: '', //右侧表格动态宽度
      searchValue: '',
      CatalogueName: '往来单位',
      DropDownedName: '全部',
      state: null,
      iconComes: 'el-icon-byj',
      // boolean
      disabled: true,
      getdisabled: true,
      loading: false,
      addModelShow: false, // 新增控制
      showModalVisible: false,
      // number
      idx: 0,
      pageNum: 1, //当前页currentPage
      pageSize: 8,
      totalSize: 10, //总条数
      regState:null,
      /* obj */
      addForm: {
        discountMoney: null,
        name: '',
        patientId: null,
        payType: null,
        receivableMoney: null,
        receivedMoney: null,
        regDepId: null,
        regDoctorId: null,
        regMode: null,
        regNum: null,
        regTypeId: null,
        regUserId: null,
        remake: '',
        utyTimeDetailsId: null,
        visitId: null,
        rgstId: null,
        /**/
        accountNumber: null,
        currentNumber: null,
        oweNumber: '0/0',
        remark: null,
        feeType: null,
        MoneyPay: null,
        healthCarePay: null,
        fitnessCardpa: null,
        unionPay: null,
        owePay: null,
        phonePay: null,
        discountsNumb: null,
        receivableNum: null,
        receiveNumber: null,
        changeNumber: null,
      },
      editForm: {}, // form表单 修改 *
      // arr
      data: [],
      userInfo: [],
      tableData: [],
      currentTable: [],
      showType: [],
      TypeOption: [
        {id: 1, label: '西药', value: '西药'}, {id: 2, label: '中成药', value: '中成药'},
        {id: 3, label: '卫材', value: '卫材'}, {id: 4, label: '血液', value: '血液'},
        {id: 5, label: '疫苗', value: '疫苗'}, {id: 9, label: '中药', value: '中药'}
      ],
      formType: [], // 表单头部内容
      unitStateOption: [{id: 1, label: '启用'}, {id: 0, label: '禁用'}],
      // title右侧按钮
      headerBtn:[
        { search:"search", title:"搜索", type:"success",style:{marginLeft:"-20px"}},
        { add:"add", title:"新增", type:"warning",auth:'system:contunt:add'},
      ],
      feetBtn: [],
      // title右侧按钮
      tableRows:[
        { name:"编码", prop:"code", type:""},{ name:"名称", prop:"name", type:"" },{ name:"可用状态", prop:"state", type:"",op:'unitStateOption'},
        { name:"所属地域", prop:"area", type:"",op:"areaOption"},{ name:"法人代表", prop:"legalRepe", type:"" },
        { name:"联系人", prop:"mainConer", nz:"nz" },{ name:"联系手机号", prop:"conerPhone", type:"" },{ name:"联系地址", prop:"conerAdd", type:"" },
        { name:"电子邮件", prop:"conerMail", nz:"nz" },{ name:"单位属性", prop:"untAtte", type:"",op:"untAtteOption"},
        { name:"统一社会信用代码", prop:"uscc", type:"" },{ name:"备注", prop:"remark", type:"" },
      ],
      areaOption: [{id: 1, label: '省内'}, {id: 2, label: '省外'}, {id: 3, label: '进口'}],
      stateOption: [{id: 0, label: '禁用'}, {id: 1, label: '可用'}],
      untAtteOption: [{id: 3, label: '合约单位'}],
      regOptions: [],
      doctorOptions: [],
      deptOptions: [],
      roleOptions: [],

      addUnitModalVisible: false, // 布尔值，控制模态框显示
      addUnitType: [],
      addUnitForm: {
        id: null,
        code: '',
        state: 1,
        area: 1,
        name: '',
        pyCode: '',
        bankName: '',
        bankNo: '',
        splerPmtno: '',
        legalRepe: '',
        mainConer: '',
        conerPhone: '',
        conerTel: '',
        conerQq: '',
        conerFax: '',
        conerPostc: '',
        url: '',
        conerMail: '',
        untAtte: 3,
        uscc: '',
        conerAdd: '',
        remark: ''
      },
      showForm: {
        id: null,
        code: '',
        state: 1,
        area: 1,
        name: '',
        pyCode: '',
        bankName: '',
        bankNo: '',
        splerPmtno: '',
        legalRepe: '',
        mainConer: '',
        conerPhone: '',
        conerTel: '',
        conerQq: '',
        conerFax: '',
        conerPostc: '',
        url: '',
        conerMail: '',
        untAtte: 3,
        uscc: '',
        conerAdd: '',
        remark: ''
      },
      addUnitRules: {
        code: [
          { required: true, message: '请填写合约单位编码！', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请填写合约单位名称！', trigger: 'blur' }
        ],
        conerPhone: [
          {
            validator: (rule, value, callback) => {
              if (value && !/^1[3-9]\d{9}$/.test(value)) {
                callback(new Error('请输入正确的手机号码'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ],
        conerTel: [
          {
            validator: (rule, value, callback) => {
              if (value && !/^($\d{3,4}$|\d{3,4}-|\s)?\d{7,14}$/.test(value)) {
                callback(new Error('请输入正确的电话号码'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ],
        conerMail: [
          {
            validator: (rule, value, callback) => {
              if (value && !/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value)) {
                callback(new Error('请输入正确的邮箱格式'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ],
        conerQq: [
          {
            validator: (rule, value, callback) => {
              if (value && !/^[1-9][0-9]{4,10}$/.test(value)) {
                callback(new Error('请输入正确的QQ号码'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ],
        bankNo: [
          {
            validator: (rule, value, callback) => {
              if (value && !/^[0-9]{10,20}$/.test(value)) {
                callback(new Error('请输入正确的银行账号'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ],
        conerPostcode: [
          {
            validator: (rule, value, callback) => {
              if (value && !/^[1-9]\d{5}$/.test(value)) {
                callback(new Error('请输入正确的邮政编码'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ],
        uscc: [
          {
            validator: (rule, value, callback) => {
              if (value && !/^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/.test(value)) {
                callback(new Error('请输入正确的统一社会信用代码'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ]
      },
      elTree: [
        {
          label: '全部', path: '', title: '', icon: 'el-icon-news',
          children: [],
        },
      ],
      permissionsArr:[],
    };
  },
  mounted() {
    this.addUnitType = AddType.map(function (v) {
      return v
    })
    this.loadData();
    this.permissionsArr = JSON.parse(localStorage.getItem('permissions'))
    this.$nextTick(() => {
      this.updateWindowWidth();
      window.addEventListener('resize', this.updateWindowWidth);
    })
  },
  methods: {
    async handleStartOrDisabled(row){
      try {
        this.addUnitForm = JSON.parse(JSON.stringify(row));
        this.addUnitForm.state = row.state === 1 ? 0 : 1;
        const res = await editContractUnit(this.addUnitForm);
        if (res.code === 200){
          await this.loadData();
        } else {
          this.$message.error(res.message)
        }
      } catch (error) {
        this.$message.error("系统异常:请联系管理员")
      } finally {

      }
    },

    handleClickEdit(row){
      this.addForm = JSON.parse(JSON.stringify(row));
      this.addUnitForm = JSON.parse(JSON.stringify(row));
      this.addUnitModalVisible = true;
    },

    handleDbShowData(row) {
      this.showForm = row;
      this.showModalVisible = true;
    },

    async handleAddContractUnit() {
      try {
        // 1. 执行表单验证
        await this.$refs.addUnitRef.validate();

        // 2. 根据ID判断是新增还是修改
        const operation = this.addUnitForm.id ? '修改' : '添加';
        const apiMethod = this.addUnitForm.id ? editContractUnit : addContractUnit;

        // 3. 调用API
        const res = await apiMethod(this.addUnitForm);

        // 4. 处理结果
        if (res.code === 200) {
          this.resetForm();
          await this.loadData();
        } else {
          this.$message.error(res.message || `系统异常:${operation}合约单位失败!`);
        }

      } catch (error) {
        // 6. 错误处理
        if (error instanceof Error) {
          console.log(error,'errorerrorerror')
          // 表单验证失败
          this.$message.warning('请检查表单填写是否正确');

          // 滚动到第一个错误字段
          this.$nextTick(() => {
            const firstError = document.querySelector('.el-form-item__error');
            if (firstError) {
              firstError.scrollIntoView({
                behavior: 'smooth',
                block: 'center'
              });
            }
          });
        } else {
          // API或其他错误
          console.error('操作失败:', error);
          this.$message.error('操作失败，请稍后重试');
        }
      }
    },

// 重置表单方法
    resetForm() {
      this.addUnitForm = Object.assign({}, this.$options.data.call(this).addUnitForm)
      this.addUnitModalVisible = false;
      this.$refs.addUnitRef.clearValidate(); // 清除验证状态
    },

    handleNameChangeCode(v, i) {
      switch (i) {
        case 3 :
          this.addUnitForm.pyCode =
              pinyin(this.addUnitForm.name, {pattern: 'first', toneType: 'none', separator: ''}).toLocaleUpperCase();
          break;
      }
    },

    handleCancelContract() {
      this.addForm = Object.assign({},this.$options.data.call(this).addForm)
      this.addUnitModalVisible = false;
      this.$refs.addUnitRef.resetFields();
    },

    safeGetMappedValue(col, row) {
      // 1. 检查数据有效性
      const rawValue = row[col.prop];
      if (rawValue === null || rawValue === undefined) return ' ';

      // 2. 检查映射数组
      const mapArray = this[col.op];
      if (!col.op || !Array.isArray(mapArray)) return rawValue;

      // 3. 执行映射
      const matched = mapArray.find(item => item.id === rawValue);
      return matched?.label || rawValue;
    },

    async loadData() {
      try {
        let res = await getContractDeptList({
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          name: this.searchValue === '' ? '' : this.searchValue,
          state: this.state == null ? null : this.state
        });
        if (res.code === 200) {
          this.tableData = res.data.content;
          this.totalSize = res.data.totalSize;
          this.pageSize = res.data.pageSize
        } else {
          this.$message.error(res.message)
        }
      } catch (error) {
        this.$message.error("系统异常:请联系管理员")
      } finally {

      }
    },
    /*
      about tree
    */
    handleNodeClick(data, e) {
      this.loadData(data.id)
    },

    // SelectVal to editForm
    // col 里面包含了表头字段和名称，list 是表格数据
    columnWidth(col, list) {
      let prop = col.prop, lab = col.lab;
      let width = 40; // 设定一个最小值
      let maxlenStr = ""; // 最长字符串
      for (let info of list) {
        if (maxlenStr < (info[prop] + "").length) maxlenStr = info[prop];
      }
      width = Math.max(width, len(lab), len(maxlenStr));
      // 表格自带的内边距(20px) 自调
      return width + 12; // 这里加了 12px
      function len(str) {
        // 实际分配长度可根据需要自行调整
        let length = 8;
        for (const char of str + "") {
          // 英文小写字符 8px
          if ("a" <= char && char <= "z") length += 8;
          // 英文大写字符 8px
          else if ("A" <= char && char <= "Z") length += 8;
          // 中文字符 28px
          else if (char >= "\u4e00" && char <= "\u9fa5") length += 32;
          // 其他 8px
          else length += 12;
        }
        return length;
      }
    },

    // 步骤
    async handClick(i) {
      console.log(i)
      switch (i) {
        case 0:
          await this.loadData();
          break;
        case 1:
          this.addUnitModalVisible = true;
          this.addUnitForm = Object.assign({},this.$options.data.call(this).addUnitForm)
          break;
      }
    },
    async handleCommand(command) {
      this.state = command === 'a' ? 1 : command === 'b' ? 0 : command === 'c' ? null : null;
      this.DropDownedName = command === 'a' ? '可用' : command === 'b' ? '禁用' : '全部';
      await this.loadData();
    },

    feetHandClick(i) {
      console.log(i)
      switch (i) {
        case 0:

          break;
        case 1:

          break;
        case 2:
          break;
        case 3:

          break;
        case 4:

          break;
        case 5:
          break;
      }
    },

    // 实时宽度
    updateWindowWidth() {
      this.windowWidth = window.innerWidth - 328;
    },


    //分页
    //每页条数改变触发
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.loadData();
    },
    //当前条数改变触发
    handleCurrentChange(val) {
      this.pageNum = val;
      this.loadData();
    },
    getColumnWidth(label, prop, tableData) {
      const minWidth = 80;
      const padding = 30; // 增加边距缓冲
      const contentList = tableData.map(item => item?.[prop] ?? '');

      // 计算所有内容宽度（包括表头）
      const widths = [...contentList, label].map(text => {
        const str = String(text || '');
        return this.getTextWidth(str) + padding;
      });

      return Math.max(minWidth, ...widths);
    },

    // 精确计算文本宽度（使用Canvas）
    getTextWidth(text, fontSize = 14) {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      ctx.font = `${fontSize}px Microsoft YaHei`;
      return ctx.measureText(text).width;
    },

    labelHead(h, {column, $index}) {
      let l = column.label.length;
      let f = 12;
      column.minWidth = f * (l + 5); //加上一个文字长度
      return h("div", {class: "table-head", style: {width: "100%"}}, [
        column.label,
      ]);
    },
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-dialog__header {
  padding: 18px;
  background-color: #007bb0;
}

/deep/ .el-dialog__title {
  font-size: 18px;
  color: #fff;
}

/deep/ .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

.dialog {
  .showDialog {
    .tabs {
      /deep/ .el-select > .el-input {
        width: 172px;
      }

      /deep/ .el-date-editor.el-input, .el-date-editor.el-input__inner {
        width: 172px;
      }

      /deep/ .el-form-item__content {
        display: flex;

        span {
          font-size: 12px;
        }
      }

      .oneLine {
        width: 524px;
        // background-color: indianred;
      }
    }

    /deep/ .el-dialog__title {
      font-size: 15px;
    }

    /deep/ .el-table {
      font-size: 15px;
    }
  }
}


// content
.MedicenCata {
  height: 100%;
  width: 100%;
  // header
  .header {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 40px;
    background-color: #efefef;
    padding: 4px;

    // justify-content: space-evenly;
    // icon
    .header-icon {
      display: flex;
      align-items: center;
    }

    .feetbtn {
      display: flex;
      justify-content: center;
      margin-left: 12px;
    }
  }

  // main
  .main {
    width: 100%;
    display: flex;
    justify-content: space-between;
    // height: 473px; /* 设置父容器的高度 */
    // overflow-y: auto; /* 当内容超出容器高度时显示垂直滚动条 */
    // left

    // right
    .main-right {
      flex: 1;
      width: 100%;
      height: 100%;
      // alert
      .addmessagesBox {
        .tabs {
          /deep/ .el-select > .el-input {
            width: 172px;
          }

          /deep/ .el-date-editor.el-input, .el-date-editor.el-input__inner {
            width: 172px;
          }

          /deep/ .el-form-item__content {
            display: flex;

            span {
              font-size: 12px;
            }
          }

          .oneLine {
            width: 524px;
            // background-color: indianred;
          }
        }

        /deep/ .el-dialog__title {
          font-size: 12px;
        }

        /deep/ .el-table {
          font-size: 12px;
        }

      }

      // icon
      .main-icon {
        display: flex;
        align-items: center;
        padding: 12px;
        line-height: 40px;

        .main-icon-a {
          // width: 240px;
          // background-color: #00557f;
        }

        .main-icon-b {
          margin-left: 28px;

          /deep/ .el-dropdown {
            font-size: 12px;
            cursor: pointer;
          }

          /deep/ .el-dropdown:hover {
            font-weight: bold;
            color: #66b1ff;
          }

          /deep/ .el-icon--right {
            // background-color: #66b1ff;
          }

          /deep/ .el-popper[x-placement^=bottom] {
            margin-top: 0;
          }
        }

        // c
        .main-icon-c {
          display: flex;
          margin-left: 28px;

          /deep/ [data-v-2bacc09b] .el-color-picker__icon, .el-input[data-v-2bacc09b], .el-textarea[data-v-2bacc09b] {
            width: 80%;
          }
        }
      }

      // table
      /deep/ .el-table .cell {
        font-size: 12px;
        text-align: center;
      }

      /deep/ .el-table td.el-table__cell div :first-child {
        text-align: center;
      }

      /deep/ .el-table td.el-table__cell div {
        text-align: center;
        overflow: hidden;
        white-space: normal;
        word-break: break-all;
      }

      .table {

      }
    }
  }

  // addModel
  .addModel {
    margin-left: 12px;

    /deep/ .el-dialog__header {
      padding: 12px;
      line-height: 28px;
      background-color: #007bb0;
    }

    /deep/ .el-dialog__title {
      color: #fff;
      font-size: 12px;
    }

    /deep/ .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
    }

    /deep/ .el-dialog__headerbtn .el-dialog__close:hover {
      background-color: brown;
    }

    /deep/ .el-form-item__label {
      font-size: 12px;
    }
  }

  .editModel {
    /deep/ .el-dialog__header {
      padding: 12px;
      line-height: 28px;
      background-color: #007bb0;
    }

    /deep/ .el-dialog__title {
      color: #fff;
      font-size: 12px;
    }

    /deep/ .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
    }

    /deep/ .el-dialog__headerbtn .el-dialog__close:hover {
      background-color: brown;
    }

    /deep/ .el-form-item__label {
      font-size: 12px;
    }
  }

  // feet
  .feet {
    padding: 12px;

  }

}
</style>